<template>
	<view class="content">
		<view class="search">
			<input type="text" value="" placeholder="请输入搜索关键词" />
		</view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000">
			<swiper-item v-for="(item,index) in banner" :key="index">
				<image :src="item.src" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="nav">
				<navigator :url="`../${item.module}/${item.module}`" class="child" v-for="(item,index) in nav" :key="index">
					<image :src="item.src"></image>
					<view>{{item.name}}</view>
				</navigator>
		</view>
		<view class="chipe">
			<view class="father">
				<view class="child" v-for="(item,index) in chipe" :key="index">
					<view class="left">
						<text class="price">￥{{item.price}}</text>
						<text class="title">{{item.value.title}}</text>
					</view>
					<view class="right">
						领取
					</view>
				</view>
			</view>
		</view>
		<view class="team">
			<view class="title">拼团</view>
			<view class="chipe">
				<view class="father">
						<view class="child" v-for="(item,index) in clas" :key="index">
							<image :src="item.cover"></image>
							<view class="tit">{{item.title}}</view>
							<view class="price">￥{{item.price}}<text class="old">￥{{item.t_price}}</text></view>
						</view>
				</view>
			</view>
			</view>
			<view class="list">
				<view class="title">最新列表</view>
				<view class="content">
					<view class="child" v-for="(item,index) in clas" :key="index">
						<image :src="item.cover" mode=""></image>
						<view class="rights">
							<view class="title">{{item.title}}</view>
							<view class="price">￥{{item.price}}<text class="old">￥{{item.t_price}}</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="foot">
				<image :src="img"></image>
			</view>
		</view>
	</view>
</template>
<script>
	import { getIndex, getChipe, getClass} from "@/http/api.js"
	export default {
		data() {
			return {
				title: '',
				nav:[],
				banner:[],
				chipe:[],
				clas:[],
				img:'',
			}
		},
		onLoad() {
			this.getBannerList();
			this.getChipeList();
			this.getClassList();
		},
		methods: {
		 	async getBannerList(){
				let data = await getIndex();
				console.log(data);
				const res = data.data;
				if(data.code === 20000){
					this.banner = res[1].data;
					this.nav = res[2].data;
					this.img = res[6].data;
					console.log(this.nav)
				}
			},
			async getChipeList(){
				let data = await getChipe();
				// console.log(data);
				const res = data.data;
				if(data.code === 20000){
					this.chipe = res;
					// console.log(this.chipe);
				}
			},
			async getClassList(){
				let data = await getClass(1);
				// console.log(data);
				const res = data.data.rows;
				if(data.code === 20000){
					this.clas = res;
					// console.log(this.clas);
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		.search{
			width: 100%;
			height: 82rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 15rpx;
			input{
				height: 50rpx;
				width: 100%;
				text-align: center;
				background: rgb(245, 245, 241);
				border-radius: 15rpx;
				font-size: 16rpx;
			}
		}
		swiper{
			width: 100%;
			height: 225rpx;
			swiper-item{
				width:100%;
				text-align: center;
				image{
					width: 540rpx;
					border-radius: 10rpx;
					height: 100%;
				}
			}
		}
		.nav{
			box-sizing: border-box;
			margin-top: 15rpx;
			width:100%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			.child{
				width: 25%;
				text-align: center;
				padding: 15rpx 0;
				font-size: 18rpx;
				image{
					width: 52rpx;
					height: 52rpx;
				}
			}
		}
		.chipe{
			width: 100%;
			height: 85rpx;
			padding: 20rpx;
			overflow-x: scroll;
			.father{
				width: 100%;
				height: 100%;			
				white-space: nowrap;
				.child{
					background: #007AFF;
					display: inline-block;
					height: 100%;
					width: 60%;
					margin-right: 20rpx;
					box-sizing: border-box;
					.left{
						width: 80%;
						height: 100%;
						float: left;
						background-color: #d39e00;
						text-align: center;
						color: #fff;
						.price{
							margin-top: 10rpx;
							font-size: 20rpx;
							display: block;
							font-weight: bold;
						}
						.title{
							display: block;
							font-size: 18rpx;
						}
					}
					.right{
						text-align: center;
						width: 20%;
						height: 100%;
						float: right;
						border-left: 2rpx dashed #fff;
						box-sizing: border-box;
						line-height: 85rpx;
						font-size: 22rpx;
						color: #fff;
						background: #ffc107;
					}
				}
				.child:last-child{
					margin-right: 70rpx;
				}
			}
		}	
		.team{
			border-top: 10rpx solid #f5f5f3;
			.title{
				height: 80rpx;
				// background: orange;
				line-height: 80rpx;
				font-weight: bold;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
			.chipe{
				width: 100%;
				height: 230rpx;
				padding: 20rpx;
				overflow-x: scroll;
				.father{
					width: 100%;
					height: 100%;			
					white-space: nowrap;
					.child{
						background: #fff;
						height: 100%;
						width: 250rpx;
						margin-right: 20rpx;
						box-sizing: border-box;
						image{
							width: 100%;
							height: 134rpx;
						}
						.tit{
							font-size: 20rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
						.price{
							margin-top: 10rpx;
							font-size: 20rpx;
							.old{
								color: #777;
								text-decoration: line-through;
							}
						}
					}
					.child:last-child{
						margin-right: 70rpx;
					}
				}
			}
		}
		.list{
			border-top: 10rpx solid #f5f5f3;
			.title{
				height: 80rpx;
				line-height: 80rpx;
				font-weight: bold;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
			.content{
				box-sizing: border-box;
				.child{
					height: 240rpx;
					// background-color: #000;
					padding: 30rpx 20rpx;
					box-sizing: border-box;
					image{
						width: 300rpx;
						height: 100%;
						float: left;
					}
					.rights{
						float: right;
						padding-left: 20rpx;
						height: 100%;
						width: 390rpx;
						.title{
							padding-left: 0;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							font-size: 28rpx;
						}
						.price{
							margin-top: 10rpx;
							font-size: 28rpx;
							color: red;
							font-weight: bold;
							.old{
								font-size: 20rpx;
								color: #777;
								font-weight: none;
								text-decoration: line-through;
							}
						}
					}
				}
			}
		}
		.foot{
			border-top: 10rpx solid #f5f5f3;
			height: 360rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
